<template>
  <div v-loading="loading" class="approvalDetails">
    <el-card class="title" shadow="never">
      <div>
        <span>{{ data.skuName }}</span>
        <span>
          <el-tag v-if="data.goodsTypeName" type="danger" size="mini">{{ data.goodsTypeName }}</el-tag>
          <el-tag type="success" size="mini">{{ data.skuType | transSkuType }}</el-tag>
          <el-tag type="warning" size="mini">{{ data.buildStandard | transCreateType }}</el-tag>
          <el-tag v-if="data.whiteListFlag === 1" type="primary" size="mini">白名单供应商</el-tag>
        </span>
      </div>
      <div v-if="formRoute !== 'examine'">
        <el-button v-if="approvalStatus" type="success" size="mini" @click="agree">同 意</el-button>
        <el-button v-if="approvalStatus" type="danger" size="mini" @click="reject">驳 回</el-button>
        <el-button size="mini" @click="black">返 回</el-button>
        <el-button type="primary" size="mini" @click="operationLog">操作日志</el-button>
      </div>
      <div v-if="formRoute === 'examine'">
        <el-button v-if="sing !== 'check'" type="success" size="mini" @click="agree">同 意</el-button>
        <el-button v-if="sing !== 'check'" type="danger" size="mini" @click="reject">驳 回</el-button>
        <el-button size="mini" @click="black">返 回</el-button>
        <el-button type="primary" size="mini" @click="operationLog">操作日志</el-button>
      </div>
    </el-card>
    <div class="commodity">
      <el-card id="content-scroll" class="box-card" shadow="never">
        <essentialInformation :goods-info="data" :span="24" :gutter="0" :xl="24" />
        <commodityAttribute :goods-info="data" :span="24" :gutter="0" :xl="24" />
        <detailPage :goods-info="data" />
        <store-info v-for="(item, index) in skuChannelInfos" :key="index" :ref="'storeInfo' + index" :commodity-attribute="item" :span="24" :xl="24" />
      </el-card>
      <el-card class="box-card" shadow="never">
        <ImgPreview ref="ImgPreview" :goods-photos="goodsPhotos" :remark-value="remarkValue" />
      </el-card>
    </div>
    <rejectApproval ref="rejectApprovalRef" />
    <operation-log ref="operationLogRef" :process-data-list="processDataList" />
  </div>
</template>

<script>
import essentialInformation from '@/views/coi/making/baseInfo.vue'
import commodityAttribute from '@/views/coi/making/goodsAttribute.vue'
import detailPage from '../components/detailPage.vue'
import storeInfo from '@/views/coi/making/storeInfo.vue'
import ImgPreview from '../components/ImgPreview.vue'
import rejectApproval from '../components/rejectApproval.vue'
import bus from '@/utils/eventBus.js'
import operationLog from '@/views/coi/approve/components/operationLog.vue'
import { findSkuBuildInfoBySkuId, purchaseApproved, complianceApproved, processData } from '@/api/coi/onlineTaskAPI/sku'
import { constructionStandard, skuType } from '@/views/coi/commonJs/dictionary.js'
import { filterKey } from '@/utils/processingData.js'
import { approval } from '../js/requser.js'
export default {
  name: 'ApprovalDetails',
  components: {
    essentialInformation,
    commodityAttribute,
    detailPage,
    storeInfo,
    ImgPreview,
    rejectApproval,
    operationLog
  },
  filters: {
    transSkuType(v) {
      return filterKey(v, skuType)
    },
    transCreateType(v) {
      return filterKey(v, constructionStandard)
    }
  },
  data() {
    return {
      scrollTop: 0,
      loading: false,
      params: {},
      data: {
        skuContent: {
          content: ''
        },
        skuChannelInfos: []
      },
      goodsPhotos: {
        skuOptionResources: [],
        transparentImg: [],
        skuResourcesImg: []
      },
      processDataList: [], // 操作日志
      sing: null, // 是否为查看
      remarkValue: {},
      formRoute: '' // 从那个模块跳转
    }
  },
  computed: {
    skuChannelInfos() {
      return this.data.skuChannelInfos.filter((item) => item.channelCode !== '0')
    },
    approvalStatus() {
      return (
        (this.params.mainStatus === '6000' && this.params.from === 'ComplianceApprovalList') ||
        (this.params.mainStatus === '5000' && this.params.from === 'PurchaseApprovalList')
      )
    }
  },
  created() {
    // window.location.href = 'http://www.baidu.com'
    // return
    this.params = this.$route.params
    this.sing = this.$route.query.sign
    this.formRoute = this.$route.query.formRoute
    this.getData()
    console.log(this.$route)
  },
  activated() {
    this.$nextTick(() => {
      document.querySelector('#content-scroll .el-card__body').scrollTop = this.scrollTop
    })
  },
  beforeRouteLeave(to, from, next) {
    this.scrollTop = document.querySelector('#content-scroll .el-card__body').scrollTop
    next()
  },
  beforeRouteUpdate(to, from, next) {
    this.scrollTop = document.querySelector('#content-scroll .el-card__body').scrollTop
    next()
  },
  methods: {
    // 获取当前商品审核信息
    async getData() {
      try {
        this.loading = true
        const id = this.params.id
        // console.log('**********', this.$route)
        // debugger
        const { result } = await findSkuBuildInfoBySkuId(id, this.formRoute)
        if (!result) return
        console.log('************', result)
        // if (this.formRoute === 'examine')result.skuChannelInfos[0].channelName = '沃尔玛到家'
        if (result) this.data = result
        // 过滤分类照片
        if (this.formRoute !== 'examine') {
          this.goodsPhotos.skuOptionResources = this.data.skuOptionResources // 素材图
          this.goodsPhotos.transparentImg = this.data.skuResources.filter((item) => item.resourceType === 3) // 透明
          this.goodsPhotos.skuResourcesImg = this.data.skuResources.filter((item) => item.resourceType === 1) // 主图
        } else {
          this.goodsPhotos.skuResourcesImg = this.data.skuChannelInfos[0].skuResources.filter((item) => item.resourceType === 1) // 主图
          const objst = {
            storeNbr: this.data.storeNbr,
            remark: this.data.remark
          }
          this.remarkValue = objst
          const list = this.data.picUrl.split(',')
          const arr = []
          list.forEach((i) => {
            const obj = {}
            obj.resourceUrl = i
            arr.push(obj)
          })

          this.goodsPhotos.transparentImg = arr
        }

        if (this.goodsPhotos.skuResourcesImg.length) this.$refs.ImgPreview.preview(this.goodsPhotos.skuResourcesImg[0].resourceUrl)
        this.data.skuChannelInfos.forEach((item) => {
          // skuEditFlag个位
          console.log(item)
          item.channelAttributeList = item.channelAttributeList.filter((_) => {
            return _.skuEditFlag ? parseInt(_.skuEditFlag.toString().charAt(_.skuEditFlag.toString().length - 1)) === 1 : 1
          })
          if (item.skuChannelInfo) {
            const data = JSON.parse(item.skuChannelInfo)
            if (item.channelAttributeList.length && data.channelAttributeList && Array.isArray(data.channelAttributeList)) {
              item.channelAttributeList.forEach((channelAttribute) => {
                const index = data.channelAttributeList.findIndex((dataChannelAttribute) => dataChannelAttribute.attrId === channelAttribute.attrId)
                if (index !== -1) channelAttribute.attrValue = data.channelAttributeList[index].attrValue
              })
            }

            if (item.categoryAttributeList.length && data.categoryAttributeList && Array.isArray(data.categoryAttributeList)) {
              item.categoryAttributeList.forEach((categoryAttribute) => {
                const index = data.categoryAttributeList.findIndex((dataCategoryAttribute) => dataCategoryAttribute.attrId === categoryAttribute.attrId)
                if (index !== -1) {
                  categoryAttribute.attrValue = data.categoryAttributeList[index].attrValue
                  if ('unitValue' in data.categoryAttributeList[index]) categoryAttribute.unitValue = data.categoryAttributeList[index].unitValue
                }
              })
            }
            item.skuChannelInfo = null
          }
        })
      } finally {
        this.loading = false
      }
    },
    black() {
      this.$router.push({ name: this.$route.params.from, params: { tab: this.$route.params.tab } })
    },
    agree() {
      const _this = this
      this.$confirm('此操作将同意审核, 是否继续？', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        roundButton: true,
        type: 'info'
      })
        .then(() => {
          _this.requestAgree()
        })
        .catch(() => {})
    },
    // 同意审核发请求
    async requestAgree() {
      let res = null
      if (this.formRoute !== 'examine') {
        if (this.params.from === 'PurchaseApprovalList') res = await purchaseApproved([{ skuId: this.params.id, rejectReason: '' }])
        else if (this.params.from === 'ComplianceApprovalList') res = await complianceApproved([{ skuId: this.params.id, rejectReason: '' }])
        else return
        if (res.result) {
          this.$message({ type: 'success', message: '同意审核成功！' })
          bus.$emit('closeTag', this.$route)
        }
      } else {
        const id = this.$route.params.id
        const rest = await approval(id)
        if (rest.result) {
          this.$message({ type: 'success', message: '同意审核成功！' })
          bus.$emit('closeTag', this.$route)
        }
        console.log('文描错误下架', rest)
      }
    },
    // 拒绝
    reject() {
      this.$refs.rejectApprovalRef.dialogVisible = true
    },
    // 操作日志
    async operationLog() {
      const { result } = await processData(this.params.id)
      if (Array.isArray(result) && result.length) {
        this.$refs.operationLogRef.dialogVisible = true
        this.processDataList = result
      } else {
        this.$message({
          type: 'warning',
          message: '未查询到该商品线上建品的操作日志'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.approvalDetails {
  height: 100%;
  padding: 12px;
  padding-top: 8px;
  .title {
    background-color: #fff;
    /deep/ .el-card__body {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &:first-child {
        font-weight: 700;
        font-size: 16px;
      }
    }
  }
  .commodity {
    height: calc(100% - 48px);
    display: flex;
    & > .box-card {
      height: 100%;
      flex: 1;
      /deep/ .el-card__body {
        height: inherit;
        overflow: auto;
        &::-webkit-scrollbar {
          width: 5px;
        }
      }
    }
    .box-card:first-child {
      /deep/ .el-card__body > div:nth-child(n + 2) {
        margin-top: 15px;
        padding-top: 10px;
        margin-bottom: 10px;
        border-top: 1px dashed #d9d9d9;
      }
    }
    .box-card:first-child {
      /deep/ .el-card__body > div > .headline:nth-child(n + 1) {
        padding-bottom: 10px;
      }
    }
  }
}

/deep/ .el-form-item__label::before {
  content: '*';
  margin-right: 4px;
  color: #fff;
}
</style>
